<template>
  <el-card class="box-card">
    <el-button class="add-user" @click.stop="showDialog">新增企业</el-button>
    <el-form :model="selectForm" ref="selectFormRef" class="demo-ruleForm">
      <el-form-item label="标签名称" prop="tags">
        <el-input class="inputvalue" v-model="selectForm.tags" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="企业所在地" prop="province">
        <el-select v-model="selectForm.province" placeholder="请选择" @change="handleProvince">
          <el-option
            :label="item"
            :value="item"
            v-for="(item,index) in citySelect.province"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="city">
        <el-select prop="city" v-model="selectForm.city" placeholder="请选择">
          <el-option
            :label="item"
            :value="item"
            v-for="(item,index) in citySelect.cityDate"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业简称" prop="shortName">
        <el-input class="inputvalue" v-model="selectForm.shortName" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="selectForm.state" placeholder="请选择">
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in formState"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="btns">
        <el-button size="mini" class="btn" @click="resetForm">清除</el-button>
        <el-button size="mini" class="btn" type="primary" @click="getCompanyList(selectForm)">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="companyList" border style="width: 100%">
      <el-table-column prop="date" type="index" label="序号" width></el-table-column>
      <el-table-column prop="number" label="企业编号" width></el-table-column>
      <el-table-column prop="shortName" label="企业简称" width></el-table-column>
      <el-table-column prop="tags" label="标签" width></el-table-column>
      <el-table-column prop="username" label="创建者"></el-table-column>
      <el-table-column prop="addDate" label="创建日期"></el-table-column>
      <el-table-column prop="remarks" label="备注"></el-table-column>
      <el-table-column prop="name" label="状态">
        <template slot-scope="scope">{{scope.row.state === 1 ? '启用':'禁用'}}</template>
      </el-table-column>
      <el-table-column class="tableItem" prop="name" label="操作" width="160">
        <template slot-scope="scope">
          <button @click="isShow = true ">修改</button>
          <button @click="isForbidden(scope.row)">{{scope.row.state ? '禁用':'启用'}}</button>
          <button @click="open(scope.row)">删除</button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="selectForm.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="selectForm.pagesize"
      layout="prev,pager,next,sizes,jumper"
      :total="counts"
    ></el-pagination>
    <companys-add
      :isShow="isShow"
      :citySelect="citySelect"
      @hideDialog="closeDialog"
      @getRefresh="getCompanyList"
    ></companys-add>
  </el-card>
</template>
<script>
import { status } from '@/api/hmmm/constants'
import { list, remove, detail, add } from '@/api/hmmm/companys'
import companysAdd from '@/module-hmmm/components/companys-add'
import { provinces, citys } from '@/api/hmmm/citys'

export default {
  name: 'companysIndex',
  components: {
    companysAdd,
  },
  data() {
    return {
      isShow: false,
      // 引入的status
      formState: [],
      // 请求参数
      query: {
        page: 1, // 当前页数
        pagesize: 5, // 每页显示多少条
      },
      // 获取的企业数据
      companyList: [],
      // 总数据条数
      counts: 0,

      // 搜索 form 数据组装
      selectForm: {
        page: 1, // 当前页数
        pagesize: 5, // 每页显示多少条
        // tag: ''
      },
      // 获取到的省,市
      citySelect: {
        province: [],
        cityDate: [],
      },
    }
  },
  methods: {
    // dialog显示与隐藏
    closeDialog() {
      console.log(111)
      this.isShow = false
    },
    // 显示子组件dialog
    showDialog() {
      this.isShow = true
    },
    // 搜索的表单重置事件
    resetForm() {
      this.$refs.selectFormRef.resetFields()
      console.log(123)
    },
    // 获取城市
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 获取地区
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      console.log(this.citySelect.cityDate)
      this.selectForm.city = this.citySelect.cityDate[0]
    },
    // 是否禁用
    async isForbidden(row) {
      console.log(row.state)
      if (row.state === 1) {
        // console.log(row.state)
        const confirmResult = await this.$confirm('是否确认禁用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).catch((err) => err)
        if (confirmResult !== 'confirm') {
          return this.$message('已取消修改')
        }
        row.state = 0
        try {
          const { data } = await detail(row)
          console.log(data)
          this.getCompanyList()
        } catch (err) {
          console.log(err)
        }
      } else {
        const confirmResult = await this.$confirm('是否确认启用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).catch((err) => err)
        if (confirmResult !== 'confirm') {
          return this.$message('已取消修改')
        }
        row.state = 1
        try {
          const { data } = await detail(row)
          console.log(data)
          this.getCompanyList()
        } catch (err) {
          console.log(err)
        }
      }
    },
    // 删除
    async open(row) {
      const confirmResult = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.error('已取消删除')
      }
      try {
        const { data } = await remove(row)
        console.log(data)
      } catch (err) {
        console.log(err)
      }
    },
    async getCompanyList() {
      try {
        const { data } = await list(this.selectForm)
        console.log(data)
        // 总数据条数
        this.counts = data.counts
        this.companyList = data.items
      } catch (err) {
        console.log(err)
      }
    },
    // 监听每页显示多少数据
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.selectForm.pagesize = pageSize
      this.getCompanyList()
    },
    // 监听页码值变化
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.selectForm.page = pageNum
      this.getCompanyList()
    },
  },
  created() {
    this.getCompanyList()
    this.getCityData()
  },
  mounted() {
    this.formState = status
  },
}
</script>

<style scoped lang='less'>
.box-card {
  margin-bottom: 12px;

  .add-user {
    width: 81px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(243, 243, 243, 1);
  }
  .el-form {
    display: flex;
    flex-direction: row;
    /deep/ .el-form-item {
      display: flex;
      .el-form-item__content {
        .inputvalue {
          input {
            width: 120px;
          }
        }
      }
      .el-select {
        width: 114px;
      }
      /deep/ .el-form-item__content {
        margin-left: unset !important;
        margin-right: 10px;
        .el-input__inner {
          height: 28px;
        }
      }
    }
    .el-form-item--medium {
      margin: 12px 0;
    }
  }
  .el-pagination {
    margin: 24px 0;
    float: right;
    /deep/.el-pagination__jump {
      margin-left: 0;
    }
  }
  /deep/.el-table th.is-leaf {
    border-bottom: 1px solid #e8e8e8;
  }
  .el-table {
    font-size: 12px;
    /deep/.el-table__body-wrapper {
      .el-table__body {
        .el-table__row {
          .cell {
            button {
              background-color: unset;
              border: none;
              color: #409eff;
            }
          }
        }
      }
    }
    .tableItem {
      /deep/button {
        border: none;
        background-color: unset;
      }
    }
  }
}
</style>
